<div id="buttons">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><img src="../Assets/home/img/l.png"/></a>
<a href="javascript:;" id="next" class="arrow"><img src="../Assets/home/img/r.png"/></a>
<div class="banner_list">
    <img ng-src="../Assets/{{item.art_img}}" alt="{{item.art_title}}" ng-repeat="item in banner_list" />
</div>
<script src="../Assets/home/js/jquery-1.11.0.js"></script>
<script>
	$(function(){
       var lis=$("#container").find('.banner_list').children('img');
       var list=$("#container").find('#buttons').children('span');
       $("#container").hover(function(){   
          clearInterval(T);
       },function(){
         T=setInterval(change,2000);
       });

       var T=null;
       var ind=0;
       clearInterval(T);
       T=setInterval(change,2000);

       function change(){
          ind++;
          if(ind>lis.length-1){
             ind=0;
          }

        lis.eq(ind).stop().animate({"opacity":"1"}, 1000).show().siblings().animate({"opacity":"0.5"}, 1000).hide();
        list.eq(ind).css({
        	background: 'blue',
        	color: 'pink'
        }).siblings().css({
        	background: 'plum',
        	color: '#fff'
        });
       }

$("#prev").click(function(){
      ind++;
          if(ind>lis.length-1){
             ind=0;
          }

        lis.eq(ind).stop().animate({"opacity":"1"}, 2000).show().siblings().animate({"opacity":"0.5"}, 2000).hide();
        list.eq(ind).css({
        	background: 'blue',
        	color: 'pink'
        }).siblings().css({
        	background: 'plum',
        	color: '#fff'
        });


      

	  
});

$("#next").click(function(){
           ind--;
          if(ind<0){
             ind=lis.length-1;
          }

        lis.eq(ind).stop().animate({"opacity":"1"}, 2000).show().siblings().animate({"opacity":"0.5"}, 2000).hide();
        list.eq(ind).css({
          background: 'blue',
          color: 'pink'
        }).siblings().css({
          background: 'plum',
          color: '#fff'
        });


      

    
});




  })


</script>